<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>税费计算</title>
    <style>
      body {
        margin: 0;
        padding: 2rem;
        font-size: 1rem;
      }
      form {
        margin-bottom: 1rem;
      }
      label {
        font-weight: bold;
      }
      h2 {
        margin: 0 auto 1rem;
      }
      .item {
        display: flex;
        flex-direction: column;
        line-height: 2;
        margin-bottom: 10px;
      }
      .label {
        min-width: 130px;
      }
      input,
      select {
        width: 100%;
        padding: 1rem;
        box-sizing: border-box;
      }
      .button {
        padding: 1rem;
        margin-top: 2rem;
        background-color: #f03131;
        color: #ffffff;
        text-align: center;
        border-radius: 5px;
        cursor: pointer;
      }
      .resultWrap {
        display: none;
        position: absolute;
        left: 2rem;
        right: 2rem;
        top: 2rem;
        border: 1px solid #ffd7a8;
        padding: 1.5rem;
        border-radius: 5px;
        background: #fff8f0;
      }
      .tip {
        color: #333;
        margin-top: 1rem;
      }
      .close {
        position: absolute;
        right: 1rem;
        top: 1rem;
      }
      .close2 {
        display: block;
        width: 50%;
        margin: 2rem auto 0;
        padding: 1rem;
        background: #f03131;
        border-radius: 5px;
        color: #ffffff;
        text-align: center;
      }
    </style>
  </head>

  <body>
    <h1>税费计算</h1>
    <form action="">
      <div class="item">
        <label for="">房屋总价（万元）</label>
        <input type="text" placeholder="请输入房屋总价" id="totalPrice" />
      </div>
      <div class="main"></div>
      <div class="button">提交</div>
    </form>
    <div class="resultWrap">
      <h2>私产税费核算结果：</h2>
      <span class="close">关闭</span>
      <div class="item">
        <div class="label">房屋总价：</div>
        <span class="total"></span>
      </div>
      <div class="item">
        <div class="label">税费总计：</div>
        <span class="total_price"></span>
      </div>
      <div class="result"></div>
      <div class="tip">
        备注：该税费是根据您输入的价格进行的测算，实际办理业务时，要以不动产中心系统中的评估价格缴纳税费。
      </div>
      <span class="close2">关闭</span>
    </div>
    <script src="js/jquery-3.5.1.js"></script>
    <script>
      var baseUrl = "https://rhtm.jfzh.com.cn/mini/";

      $(".button").click(function () {
        let totalPrice = $("#totalPrice").val();
        $(".total").text("￥" + totalPrice + "万");

        let data = {
          customerId: "",
          optionIds: [],
          totalPrice,
          type: "taxes",
        };
        $("select option:selected").each(function () {
          data.optionIds.push($(this).val());
        });
        optionSubmit(data);
        // console.log(data.optionIds)
      });
      result(); //初始化问题

      $(".close,.close2").click(function () {
        $("form")[0].reset();
        $(".resultWrap").hide();
      });

      var html1 = getOption("o1");
      var html2 = getOption("o2");
      var html3 = getOption("o36");

      $("select").change(function () {
        var id = $(this).val();
        var len_1 = $(".main").has("#s2").length;
        var len_2 = $(".main").has("#s14").length;
        var len_3 = $(".main").has("#s24").length;

        switch (id) {
          case "o1":
            $("#s14").prev("label").remove();
            $("#s14").remove();
            if (!len_1) {
              $(".main").append(html1);
            }
            break;
          case "o2":
            $("#s2").prev("label").remove();
            $("#s2").remove();
            if (!len_2) {
              $(".main").append(html2);
            }
            break;
          case "o36":
            if (!len_3) {
              $(".main").append(html3);
            }
            break;
          default:
            $("#s24").prev("label").remove();
            $("#s24").remove();
        }
      });

      // 初始问题列表
      function result() {
        var result = null,
          html = "";
        $.ajax({
          contentType: "application/json",
          type: "get",
          url: baseUrl + "question/list?type=taxes",
          cache: false,
          // data: JSON.stringify(datas), //重点必须为一个变量如：data
          dataType: "json",
          async: false,
          success: function (data) {
            // console.log(data.data);
            result = data.data;
            result.forEach(function (el) {
              html += `<div class="item">
                            <label>${el.title}</label>
                            <select id="s${el.id}">
                                <option value="请选择" selected>请选择</option>
                        `;
              el.optionList.forEach(function (ele) {
                html += `
                                <option value="${ele.id}">${ele.title}</option>
                                `;
              });

              html += "</select></div>";

              $(".main").html(html);
            });
          },
        });
        return html;
      }
      // 选项对应问题
      function getOption(oid) {
        var result = null,
          html = "";
        $.ajax({
          contentType: "application/json",
          type: "get",
          url: baseUrl + "question/getOptionQuestion?oid=" + oid,
          // url: baseUrl + "question/getOptionQuestion?oid=o1",
          cache: false,
          dataType: "json",
          async: false,
          success: function (data) {
            // console.log(data.data);
            result = data.data;
            result.forEach(function (el) {
              html += `<div class="item">
                            <label>${el.title}</label>
                            <select id="s${el.id}">

                        `;
              el.optionList.forEach(function (ele) {
                html += `
                                <option value="${ele.id}" data-sub="${ele.hasSub}">${ele.title}</option>
                                `;
              });

              html += "</select></div>";
            });
          },
        });
        return html;
      }
      // 提交结果
      function optionSubmit(data) {
        var result = null,
          html = "";
        $.ajax({
          contentType: "application/json",
          type: "post",
          url: baseUrl + "answer/optionSubmit",
          cache: false,
          data: JSON.stringify(data), //重点必须为一个变量如：data
          dataType: "json",
          async: false,
          success: function (data) {
            // console.log(data.data);
            result = data.data.conclusionResultItemLists;
            $(".total_price").text("￥" + data.data.totalCost);
            result.forEach(function (el) {
              html += `<div class="item">${el.conclusion}</div>`;
              if (el.cost !== "-1" && el.cost !== "-1.0") {
                html += `<div>￥${el.cost}</div></div>`;
              }
            });
            $(".result").html(html);
            $(".resultWrap").show();
          },
        });
      }
    </script>
  </body>
</html>
